<template>
  <div class="dialog">
    <el-dialog 
      :title="titleText"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div v-loading="loadFilesing" style="width:100%">
        <video
          v-for="(item, index) in videoList"
          :key="index"
          :src="item.url"
          class="video-con"
          @click="clickVideo(item.url)"
        ></video>
        <p v-if="videoList.length === 0 && !loadFilesing" class="hang-font">暂无内容</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import failureToReportApi from "@/api/processing-management/equip-repair-manage/failure-to-report";
export default {
  name: "",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      showDialog: this.show,
      videoList: [],
      loadFilesing: false
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    editObject() {},
    titleText(v) {
      if (v && (v === "故障视频" || v === "维修视频")) {
        this.videoList = [];
        // this.query();
        this.queryVideo();
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // query() {
    //   // 获取数据
    //   if (this.editObject.hitchInfoCode) {
    //     this.loadFilesing = true;
    //     failureToReportApi
    //       .queryByHitchInfoId(this.editObject.hitchInfoCode)
    //       .then(res => {
    //         if (res.code === 1) {
    //           let data = res.data || [];
    //           this.videoList = [];
    //           if (data) {
    //             data.forEach(a => {
    //               if (a.pictureType === "video/mp4") {
    //                 a.url = this.deal(a["pictureData"]);
    //                 this.videoList.push(a);
    //               }
    //             });
    //           }
    //           this.loadFilesing = false;
    //         } else {
    //           this.$message.error(res.msg);
    //         }
    //       });
    //   }
    // },
    // 获取视频数据
    async queryVideo() {
      if (this.titleText === "故障视频") {
        if (this.editObject.hitchInfoCode) {
          this.loadFilesing = true;
          const res = await failureToReportApi.queryBindVideos(
            this.editObject.hitchInfoCode
          );
          if (res.code === 1) {
            const data = res.data;
            if (data.length > 0) {
              data.forEach(item => {
                this.videoList.push({
                  url: `https://gateway.matefarm.net/v3/equipment-base/v1/equipmentVideo/getFileById?equipmentVideoId=${item.equipmentVideoId}&databaseName=DB_TDW1_TENANT`
                });
              });
            }
            this.loadFilesing = false;
          } else {
            this.$message.error(res.msg);
          }
        }
      } else if (this.titleText === "维修视频") {
        if (this.editObject.repairRecordCode) {
          this.loadFilesing = true;
          const res = await failureToReportApi.queryRepairVideos(
            this.editObject.repairRecordCode
          );
          if (res.code === 1) {
            const data = res.data;
            if (data.length > 0) {
              data.forEach(item => {
                this.videoList.push({
                  url: `https://gateway.matefarm.net/v3/equipment-base/v1/equipmentVideo/getFileById?equipmentVideoId=${item.equipmentVideoId}&databaseName=DB_TDW1_TENANT`
                });
              });
            }
            this.loadFilesing = false;
          } else {
            this.$message.error(res.msg);
          }
        }
      }
    },
    deal(data) {
      // 获取到了blob对象
      let blob = this.base64ToBlob(data);
      // 获取当前url，直接放到iframe就能用，下载同理
      let blobURL = window.URL.createObjectURL(blob);
      return blobURL;
    },
    base64ToBlob(code) {
      // Base64一行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉，有时候因为存在需要把加号空格之类的换回来，取决于base64存取时的规则。
      code = code.replace(/[\n\r]/g, "");
      var raw = window.atob(code);
      let rawLength = raw.length;
      // 转换成能直接解析的Uint8Array类型
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: "video/mp4" });
    },
    clickVideo(data) {
      window.open(data, "_blank");
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("cancelDialog");
    }
  }
};
</script>

<style lang="scss" scoped>
.video-con {
  width: 100%;
  height: 300px;
}
::v-deep .el-dialog__body {
  max-height: 500px;
  overflow-y: auto !important;
  overflow-x: hidden;
}
.hang-font {
  width: 100%;
  font-size: 16px;
  text-align: center;
}
</style>
